<template>
	<view class="content">
		<!-- 头部 -->
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item grey f-size" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<!-- 显示区域 -->
		<scroll-view class="list"  :style="{height: contentHeight + 'px'}" scroll-y="true" @scrolltolower="queryData(index)" v-for="(item, index) in navList" :key="index" v-if="tabCurrentIndex === index">
			<view v-if="index===0">
				<view class="summary" @click="detail('untouchedDisordered')" v-for="(itemdetail,i) in item.state" :key="i">
					<view>未拜访未开单</view>
					<view class="grey f-size">{{itemdetail.untouchedDisordered}}</view>
				</view>
				<view class="summary" @click="detail('untouchedOrdered')"  v-for="(itemdetail,i) in item.state" :key="i">
					<view>未拜访已开单</view>
					<view class="grey f-size">{{itemdetail.untouchedOrdered}}</view>
				</view>		
				<view class="summary" @click="detail('touchedDisordered')"  v-for="(itemdetail,i) in item.state" :key="i">
					<view>已拜访未开单</view>
					<view class="grey f-size">{{itemdetail.touchedDisordered}}</view>
				</view>
				<view class="summary" @click="detail('touchedOrdered')"  v-for="(itemdetail,i) in item.state" :key="i">
					<view>已拜访已开单</view>
					<view class="grey f-size">{{itemdetail.touchedOrdered}}</view>
				</view>
			</view>
			<view v-else-if="index===1">
				<view class="summary" v-for="(itemdetail,i) in item.state" :key="i" @click="getAreaId(itemdetail.customerAreaId)"  >
					<view class="f-size black">{{itemdetail.customerAreaName}}</view>
					<toptab :itemdetail='itemdetail' class="right"/>
				</view>
				<end-temp v-show="end1"></end-temp>
			</view>
			<view v-else-if="index===2">
				<view class="summary" v-for="(itemdetail,i) in item.state" :key="i" @click="getUserId(itemdetail.userId)">
					<view class="f-size black">{{itemdetail.userName}}</view>
					<toptab :itemdetail='itemdetail' class="right"/>
				</view>
				<end-temp v-show="end2"></end-temp>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
import toptab from './toptab.vue';
import { getScreen} from "../service/auth";
import endTemp from "../components/endTemp.vue";
export default {
	components: {
		toptab,endTemp
	},
    props:{
        navList:{
			type:Array,
			default:[]
		},
		end1:{
			type:Boolean,
			default:false
		},
		end2:{
			type:Boolean,
			default:false
		}
    },
	data() {
		return {
			contentHeight:0,
			tabCurrentIndex: 0,
		};
	},

	onLoad(option) {
		// 页面显示是默认选中第一个
		this.tabCurrentIndex = 0;
	},
	created() {
	  const {width,height} = getScreen()
      this.contentHeight = height - (275 * width / 750)
	},
	methods: {
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.$emit('getdata',index)
		},
		queryData(i){
        this.$emit('addpage',i)
      },
	  detail(item){
		this.$emit('detail',item)
	  },
	  getAreaId(item){
		this.$emit('getAreaId',item)
	  },
	  getUserId(item){
		this.$emit('getUserId',item)
	  }
	}
};
</script>

<style lang="scss">

.content {
	background: #f6f7f7;
	height: 100%;
	.list{
		.summary{
			border-bottom: 1rpx solid #f5f0f0;
			padding: 15rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: white;
			.right{
				width: 30%;
				font-size: 22rpx;
    			color: grey;
			}
		}
		// .summary:hover{
		// 	background-color: #f6f7f7;
		// }
	}
}

// .swiper-box {
// 	height: calc(100% - 40px);
// }
// .list-scroll-content {
// 	height: 100%;
// }

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		// font-size: 15px;
		// color: red;
		position: relative;
		&.current {
			color: #0596fd;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid #0596fd;
			}
		}
	}
}
.f-size{
    font-size: 26rpx;
}
.f-weight{
    font-weight: 600;
}
.black{
    color: #000;
  }
// .uni-swiper-item {
// 	height: auto;
// }
// .order-item {
// 	display: flex;
// 	flex-direction: column;
// 	padding-left: 30upx;
// 	background: #fff;
// 	margin-top: 16upx;
// 	.i-top {
// 		display: flex;
// 		align-items: center;
// 		height: 80upx;
// 		padding-right: 30upx;
// 		font-size: red;
// 		color: red;
// 		position: relative;
// 		.time {
// 			flex: 1;
// 		}
// 		.state {
// 			color: red;
// 		}
// 		.del-btn {
// 			padding: 10upx 0 10upx 36upx;
// 			font-size: red;
// 			color: red;
// 			position: relative;
// 			&:after {
// 				content: '';
// 				width: 0;
// 				height: 30upx;
// 				border-left: 1px solid red;
// 				position: absolute;
// 				left: 20upx;
// 				top: 50%;
// 				transform: translateY(-50%);
// 			}
// 		}
// 	}
// 	/* 多条商品 */
// 	.goods-box {
// 		height: 160upx;
// 		padding: 20upx 0;
// 		white-space: nowrap;
// 		.goods-item {
// 			width: 120upx;
// 			height: 120upx;
// 			display: inline-block;
// 			margin-right: 24upx;
// 		}
// 		.goods-img {
// 			display: block;
// 			width: 100%;
// 			height: 100%;
// 		}
// 	}
// 	/* 单条商品 */
// 	.goods-box-single {
// 		display: flex;
// 		padding: 20upx 0;
// 		.goods-img {
// 			display: block;
// 			width: 120upx;
// 			height: 120upx;
// 		}
// 		.right {
// 			flex: 1;
// 			display: flex;
// 			flex-direction: column;
// 			padding: 0 30upx 0 24upx;
// 			overflow: hidden;
// 			.title {
// 				font-size: 20rpx;
// 				color: red;
// 				line-height: 1;
// 			}
// 			.attr-box {
// 				font-size:  2upx;
// 				color: red;
// 				padding: 10upx 12upx;
// 			}
// 			.price {
// 				font-size:2upx;
// 				color: red;
// 				&:before {
// 					content: '￥';
// 					font-size: 20rpx;
// 					margin: 0 2upx 0 8upx;
// 				}
// 			}
// 		}
// 	}

// 	.price-box {
// 		display: flex;
// 		justify-content: flex-end;
// 		align-items: baseline;
// 		padding: 20upx 30upx;
// 		font-size: 2upx;
// 		color: red;
// 		.num {
// 			margin: 0 8upx;
// 			color: red;
// 		}
// 		.price {
// 			font-size: 20rpx;
// 			color: red;
// 			&:before {
// 				content: '￥';
// 				font-size: 40rpx;
// 				margin: 0 2upx 0 8upx;
// 			}
// 		}
// 	}
// 	.action-box {
// 		display: flex;
// 		justify-content: flex-end;
// 		align-items: center;
// 		height: 100upx;
// 		position: relative;
// 		padding-right: 30upx;
// 	}
// 	.action-btn {
// 		width: 160upx;
// 		height: 60upx;
// 		margin: 0;
// 		margin-left: 24upx;
// 		padding: 0;
// 		text-align: center;
// 		line-height: 60upx;
// 		font-size: 2upx;
// 		color:red;
// 		background: #fff;
// 		border-radius: 100px;
// 		&:after {
// 			border-radius: 100px;
// 		}
// 		&.recom {
// 			background: #fff9f9;
// 			color: red;
// 			&:after {
// 				border-color: #f7bcc8;
// 			}
// 		}
// 	}
// }
</style>
